let outerWidth
let index
let add
let length
let timer
let li_width

// 将第一个li复制到末尾实现第一到第二的过渡动画
add = $(".banner ul li").first().clone()
$(".banner ul").append(add)
//ul下li个数
length = $(".banner ul li").length


ChangeWidth()
$(window).resize(function () {
    clearInterval(timer)
    $(".banner ul").css('left', '0')
    ChangeWidth()
})

//宽度改变函数
function ChangeWidth() {
    //获得当前窗口宽度
    li_width = $(window).width()
    //li宽度设为窗口宽度
    $(".banner ul li").css("width", li_width)
    //ul宽度设为li个数*li宽度
    $(".banner ul").css("width", length * li_width)
    timer = setInterval(control, 3000);
    index = 0
}

//调整index值并执行移动函数
function control() {
    index++
    if (index == 3) {
        $(".banner ul").css('left', '0')
        index = 1
    }
    Move()
}

//鼠标覆盖停止，移开继续
$(".banner ul li").hover(
    function () {
        clearInterval(timer)
    },
    function () {
        timer = setInterval(control, 3000);
    }
)

//ol下li点击事件
$(".banner ol li").click(function () {
    index = $(this).index()
    Move()
    if (!$(this).hasClass("active")) {
        $(this).addClass("active")
        $(this).siblings().removeClass("active")
    }
})

//根据index移动ul，为ol下li添加效果
function Move() {
    $(".banner ul").animate({
        left: -li_width * index + 'px'
    }, 1000)
    $(".banner ol li").removeClass("active")
    if (index == length - 1) {
        $(".banner ol li").eq(0).addClass("active")
    } else {
        $(".banner ol li").eq(index).addClass("active")
    }
}